<template>
	<view class="container">
		<!-- 登录提示弹窗 -->
		<uni-popup ref="loginTips" type="loginTips">
			<view class="login-tips">
				<!-- Close -->
				<view
					style="display: flex; align-items: flex-end; justify-content: flex-end; padding: 0rpx 37rpx; padding-top: 34rpx;"
					@tap="close">
					<image style="width: 26rpx; height: 26rpx;" src="@/static/ic_popup_close.png"></image>
				</view>
				<!-- 提示图 -->
				<view class="login-tips-img">
					<image style="width: 300rpx; margin-left: 50rpx; z-index: 1;" mode="widthFix"
						src="@/static/login/ic_login_tips_02.png"></image>
					<image style="width: 465rpx; transform: translateX(-10%);" mode="widthFix"
						src="@/static/login/ic_login_tips_01.png">
					</image>
				</view>
				<!-- 政策 -->
				<view class="uni-flex" style="display: flex; align-items: baseline; margin: 21rpx 65rpx;">
					<radio color="rgba(62, 59, 54, 1)" style="transform:scale(0.7); " />
					<view style=" color: rgba(41, 43, 53, 0.8); font-size: 24rpx;">
						阅读并同意《服务协议》及《个人信息处理规则》和《运输管理协议》等
					</view>
				</view>
				<!-- 登录 -->
				<view class="login">登录</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			close() {
				this.$refs.loginTips.close()
			},
			showBottom() {
				this.$refs.loginTips.open("bottom")
			},
		},
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.login-tips {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		background-color: white;
		border-radius: 0rpx 50rpx 0rpx 0rpx;
	}

	.login-tips-img {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login {
		margin-top: 5rpx;
		margin-bottom: 30rpx;
		margin-left: 65rpx;
		margin-right: 65rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		background-color: rgba(62, 59, 54, 1);
		border-radius: 50rpx;
		color: white;
		font-size: 28rpx;
		font-weight: bold;
	}
</style>